<template>
  <el-container style="height: 100%; width: 100%">
    <el-header style="padding: 0" height="8vh"
      ><top-bar info="文心成画"></top-bar
    ></el-header>
    <el-main style="padding: 0"><router-view /></el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { defineComponent, ref, toRefs, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import TopBar from "@/components/TopBar.vue";
import WOW from "wow.js";
onMounted(() => {
  var wow = new WOW({
    boxClass: "wow", // animated element css class (default is wow)
    animateClass: "animated", // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    // callback: function (box:any) {
    // },
    scrollContainer: null, // optional scroll container selector, otherwise use window,
    resetAnimation: true, // reset animation on end (default is true)
  });
  wow.init();
});
</script>

<style>
#app {
  font-family: Zhu, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: Zhu(字体);
  src: url("./assets/fonts/MaokenZhuyuanTi.ttf");
}
html,
body {
  font-family: Zhu, Avenir, Helvetica, Arial, sans-serif;
  height: 100%;
}
</style>
